<template>
    <div class="cadBind">
        <div class="condition">
            <el-form ref="form" :model="formSearch" label-width="50px">
                <el-form-item label="项目">
                    <el-select v-model="formSearch.xqId" placeholder="请选择项目" size="mini" @change="getSection">
                        <el-option v-for="item in xqSelect" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <div> -->
            <slot name="btnName"></slot>

            <div class="btn">
                <slot name="btn"></slot>
            </div>
            <!-- </div> -->
            <template class="sectionFilter">
                <slot name="sectionFilter">
                    <!-- :default-checked-keys="defaultCheck"   @check-change="checkChangeClick"  show-checkbox -->
                    <el-tree v-if="viewType==1" :data="sectionTree" :props="defaultProps" :accordion="true"
                        node-key="id" ref="sectionTree" :default-expanded-keys="defaultExpand">
                        <div class="custom-tree-node" slot-scope="{ node, data }">
                            <el-radio-group v-model="sectionId" @change="changeRadio(data)">
                                <el-radio :label="data.id"><span>{{ data.name }}</span></el-radio>
                            </el-radio-group>
                        </div>
                    </el-tree>
                </slot>
            </template>

        </div>

        <div class="searchBox">
            <div class="operateBar">
                <div>
                    <div class="operateTop">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item v-for="(item) in checkedSectionList" :key="item.id">{{item.name}}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                        <div class="viewType">
                            <span :class="{nav_option_active:viewType==1}" @click="refreshPoint();viewType=1">空间展示</span>
                            <span :class="{nav_option_active:viewType==2}" @click="showList()">列表展示</span>
                        </div>
                    </div>
                </div>
                <div style="height:100%;display:flex;">
                    <slot name="search"></slot>
                </div>
            </div>
            <!-- && $route.path == '/iot_device_point' -->
            <!-- 暂无图片！ -->
            <div v-show="uploadFlag && viewType==1 " class="noImg">
                <div>
                    <div>暂无图片！</div>
                    <el-upload class="upload-demo" ref="upload" :action="uploadPath" :limit="1" :multiple="false"
                        :on-exceed="handleExceed" :on-success="handleSuccess" :file-list="fileList">
                        <el-button size="small" type="primary" title="请选择区域">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传一张图片</div>
                    </el-upload>
                </div>
            </div>
            <!-- 底图 -->
            <div v-show="bindPoint.url && viewType==1" class="cadImg" id="cadImg">
                <!-- :style="'background:url('+bindPoint.url+')'" -->
                <!--
                    用个div作为底图，将新增和回显的点都在放div中，

                 -->
                <div ref="img"
                    :style="{transform:`translate(${chaX}px , ${chaY}px) scale(${zoom})`,transformOrigin:'0 0',userSelect:'none'}">
                    <img :src="bindPoint.url" ref="cad" alt="图片加载失败..." @mousedown.prevent="dragStart"
                        @mousemove="moveImg" @mouseleave="dragOver" @mouseup="dragEnd" @mousewheel.prevent='zoomImg'>

                    <!-- 绑点 -->
                    <!-- <span style="width:32px;height:32px;position:absolute;zIndex:9999;" class="mark"></span> -->
                    <!-- 回显点 -->
                    <point :pointList="pointList" :systemType="null"
                        @getPointList="getPointList" :xqId="formSearch.xqId" :imgH="imgH" :imgW="imgW"></point>
                </div>

                <!-- :deviceSystem="deviceSystem" -->

            </div>
            <div class="commonTable">
                <keep-alive>
                    <slot name="data" v-if="viewType==2"></slot>
                </keep-alive>
            </div>
        </div>

        <!-- 右边抽屉 -->
        <el-drawer title="设备绑点（点击新增）" :visible.sync="drawer" :direction="direction" :before-close="closeDrawer"
            @open="openDialog" class="drawer">
            <el-form :model="devSearch" :inline="true" label-width="80px" class="form_demo" size="small">
                <el-form-item label="系统" class="devForm">
                    <el-select v-model="drawerDevSys" placeholder="请选择系统" clearable>
                        <el-option v-for="system in systemList" :key="system.id" :label="system.systemType" :value="system.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品" class="devForm">
                    <!-- <el-form-item label="品牌" class="devForm" v-if="['监控','门禁'].includes(drawerDevSys)"> -->
                    <el-select v-model="drawerDevBrand" placeholder="请选择产品" clearable>
                        <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称">
                    <el-input @change="deviceNamechange" v-model="formSearch.deviceName" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDevList">查询</el-button>
                </el-form-item>
                <el-form-item label="设备总数：" label-width="100px">
                    <span>{{devList.length}}</span>
                </el-form-item>
            </el-form>
            <div class="deviceList" v-if="devList">
                <div class="dev " v-for="(item,index) in devList" :key="Math.random()">
                    <!-- <div class="dev " v-for="(item,index) in devList" :key="item.system"> -->
                    <span :class="{
                        'doorMagnetic':pointImg=='门禁',
                        'camera':pointImg=='监控',
                        'alarm':pointImg=='安防报警',
                        'parking':pointImg=='停车场',
                        }" @click="addPoint(item)"></span>
                    <div>{{item.name}}</div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import point from './point.vue';
import {
  sectionTree,
  xqSelectList,
  uploadFloorImg,
  getFloorImg,
  systemList,
  getDeviceInfo,
  getDoorDevList,
  getPointBySecId,
  getCameraList,
  getCameraDevInfo,
  getDeviceMap,
  getCarDevs,
  getAkxDoorsSection, listSelect, iotdevicepage,
} from '../../url/api';
export default {
    props: [
        'drawer',
        'tableData',
        'review',
        'deviceSystem',
        'deviceBrand',
        'homePlay',
        'url',
        'getListFlag',
        'spaceType',
    ],
    components: {
        point,
    },
    data() {
        return {
            beforeDrag: true,
            imgW: 0, //图片宽高
            imgH: 0, //图片宽高
            // imgVW:0,//百分之几的距离
            // imgVH:0,//百分之几的距离
            moveX: 0, // 移动距离
            moveY: 0, // 移动距离
            chaX: 0, //差值
            chaY: 0, //差值
            startX: 0, //开始按下x坐标
            startY: 0, //开始按下y坐标
            zoom: 1, //缩放
            isDown: false, //是否按下
            doorSectionList: '',
            pointImg: '监控',
            building: '', //监控的区域id
            pointList: [],
            devSearch: {},
            drawerDevSys: null, //抽屉 设备系统 1监控  2门禁 3停车场 4安防-公区 5安防-室内 6火灾
            drawerDevBrand: '', //抽屉 设备类型
            devList: [], //drawer里的绑定设备列表
            devList2: [], // drawer里的绑定设备列表  过滤的数据
            options: [], //楼栋
            productList: [],
            fileList: [], //上传的图片列表
            uploadPath: '/api/v1.0/file/upload/file',
            viewType: 1, //判断空间展示 还是 列表展示
            uploadFlag: false,
            imgUrl: '',
            // imgUrl5:f5,
            sectionName: '',
            value: '',
            direction: 'rtl',
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id',
            },
            checked: [], // 存储选中节点的id
            formSearch: { xqId: '', current: 1, size: 9999 },
            sectionId: '',
            xqSelect: [],
            sectionTree: [],
            checkedId: '',
            checkedSectionList: [],
            saveParams: {},
            bindPoint: { url: '' },
            defaultCheck: [],
            defaultExpand: [],
            cameraList: [],
            doorList: [],
            addDeviceBindList: [],
            alarmFrom: {
                size: 9999,
                current: 1,
                devType: '',
            },
            systemItemType: 1,
            systemList: [],
        };
    },
    watch: {
        $route(val) {
        },
        /* 根据选择的系统筛选设备点位（回显绑点点位） */
        deviceSystem() {
            this.refreshPoint();
        },
        /* 监听是否绑点成功  成功则删除绑点的图标 */
        review(val, oldVal) {
            if (val) {
                this.saveParams.list.forEach((item, index) => {
                    let dom = document.querySelector('#myDom_' + index);
                    dom.remove();
                });
                this.saveParams.list = [];
                this.addDeviceBindList = [];
                this.refreshPoint();
            }
        },
        url(val) {
            this.bindPoint.url = val;
        },
        getListFlag(val) {
            if (val) this.getPointList();
        },
        viewType(val) {
            this.saveParams.spaceType = val;
            this.$emit('getData', this.saveParams);
        },
        spaceType(val) {
            this.viewType = val;
        },
    },
    methods: {
        deviceNamechange(val){
            this.formSearch.deviceName = val
            console.log("AAAAAAAAA",val);
        },
      showList() {
        this.$emit('listShow');
        this.viewType = 2;
      },
      getProductList() {
        listSelect({XqId: this.formSearch.xqId}).then(({data}) => {
          if (data.ok) {
            this.productList = data.data;
          }
        })
      },
      getSystemList() {
        systemList().then(({data}) => {
          if (data.ok) {
            this.systemList = data.data;
          }
        })
      },
      openDialog() {
        this.getSystemList();
        this.getProductList();
      },
        //根据名称获取系统类型
        getSystemType(name) {
            let str = [
                '',
                '监控',
                '门禁',
                '停车场',
                '安防报警-公区',
                '安防报警-室内',
                '火灾报警',
            ];
            return str.indexOf(name);
        },
        //拖拽结束
        dragEnd(e) {
            this.isDown = false;
            this.moveX = this.chaX;
            this.moveY = this.chaY;
            this.saveParams.tsf = {
                zoom: this.zoom,
                chaX: this.chaX,
                chaY: this.chaY,
            };
            // this.$emit('getData', this.saveParams);
        },
        //拖拽开始
        dragStart(e) {

            this.startX = e.clientX;
            this.startY = e.clientY;
            this.isDown = true;

            // let domList = document.querySelectorAll('.mark');
            // domList.forEach((item) => {
            //     item.style.left = item.style.left.replace('px','') + this.chaX + 'px';
            //     item.style.top = item.style.top.replace('px','') + this.chaY + 'px';
            // });
        },
        //拖拽完成
        dragOver(e) {
            this.isDown = false;
        },
        getNum(n) {
            return n - n * 2;
        },
        moveImg(e) {
            if (!this.isDown) return;
            this.chaX = this.moveX + e.clientX - this.startX;
            this.chaY = this.moveY + e.clientY - this.startY;
        },
        //底图缩放
        zoomImg(e) {
            e = e || event;
            // let imgDom = document.querySelector('#cadImg');
            let direction = e.deltaY > 0 ? 'down' : 'up';
            if (direction === 'up') {
                if (this.zoom > 1.5) return;
                this.zoom += 0.1;
            } else {
                if (this.zoom < 0.6) return;
                this.zoom -= 0.1;
            }
            let domList = document.querySelectorAll('.mark');
            domList.forEach((item) => {
                // item.style.left =
                let left = +item.style.left.replace('px', '');
                let top = +item.style.top.replace('px', '');
                item.style.left = left * this.zoom;
                item.style.top = top * this.zoom;
            });
            this.addDeviceBindList = this.addDeviceBindList.map(
                (item, index) => {
                    let left = domList[index].style.left.replace('px', '');
                    let top = domList[index].style.top.replace('px', '');
                    item.x = +left;
                    item.y = +top;
                    return item;
                }
            );
            this.saveParams.list = this.addDeviceBindList;
            this.$emit('getData', this.saveParams);
        },
        positionZoom(zoom) {
            // zoom = 2 - zoom;
            let domList = document.querySelectorAll('.mark');
            domList.forEach((item) => {
                item.setAttribute('zoom', zoom.toFixed(1));

                let left = item.getAttribute('moveX');
                let top = item.getAttribute('moveY');

                let xx = item.getAttribute('chaX');
                let yy = item.getAttribute('chaY');

                // item.style.width = 32 * zoom + 'px';
                // item.style.height = 32 * zoom + 'px';

                let flag = null;
                if (zoom > 1) {
                    flag = true;
                    zoom = (zoom - 1).toFixed(1);
                } else {
                    flag = false;
                    zoom = (1 - zoom).toFixed(1);
                }
                let n1 = Math.round(Math.abs(zoom * left));
                let n2 = Math.round(Math.abs(zoom * top));
                let n3 = Math.round(Math.abs(zoom * xx));
                let n4 = Math.round(Math.abs(zoom * yy));
                if (flag) {
                    //     `zoom：${
                    //         (1 + +zoom).toFixed(1)
                    //     }，moveX：${n1}，moveY：${n2}，chaX：${n3}，chaX：${n4}`
                    // );
                    item.style.left = +left + +n1 + +n3 + 'px';
                    item.style.top = +top + +n2 + +n4 + 'px';
                } else {
                    //     `zoom：${
                    //         (1 - +zoom).toFixed(1)
                    //     }，moveX：${n1}，moveY：${n2}，chaX：${n3}，chaX：${n4}`
                    // );
                    item.style.left = +left - +n1 - +n3 + 'px';
                    item.style.top = +top - +n2 - +n4 + 'px';
                }
                /* if (zoom > 1) {
                    zoom = (zoom - 1).toFixed(1);
                    let n1 = Math.round(Math.abs(zoom * left));
                    let n2 = Math.round(Math.abs(zoom * top));
                    let n3 = Math.round(Math.abs(zoom * xx));
                    let n4 = Math.round(Math.abs(zoom * yy));
                        `zoom：${
                            (1 + +zoom).toFixed(1)
                        }，moveX：${n1}，moveY：${n2}，chaX：${n3}，chaX：${n4}`
                    );
                    item.style.left = +left + +n1 + +n3 + 'px';
                    item.style.top = +top + +n2 + +n4 + 'px';
                } else {
                    zoom = (1 - zoom).toFixed(1);
                    let n1 = Math.round(Math.abs(zoom * left));
                    let n2 = Math.round(Math.abs(zoom * top));
                    let n3 = Math.round(Math.abs(zoom * xx));
                    let n4 = Math.round(Math.abs(zoom * yy));
                        `zoom：${
                            (1 - +zoom).toFixed(1)
                        }，moveX：${n1}，moveY：${n2}，chaX：${n3}，chaX：${n4}`
                    );
                    item.style.left = +left - +n1 - +n3 + 'px';
                    item.style.top = +top - +n2 - +n4 + 'px';
                } */
            });
        },
        // 单选区域  并且获取底图
        changeRadio(data) {
            this.saveParams.sectionId = data.id;
            this.saveParams.xqId = this.formSearch.xqId;
            this.refreshPoint();

            this.chaX = 0;
            this.chaY = 0;
            this.zoom = 1;

            this.$emit('getData', this.saveParams);
            let obj = {
                id: data.id,
                xqId: this.formSearch.xqId,
                state: 0,
                systemType: this.deviceSystem,
                // deviceType: this.deviceBrand,
            };
            this.getCADImg(obj, false);
        },
        // 通过类型返回系统
        getSystemName(type) {
            if (type == 1) {
                return '监控';
            } else if (type == 2) {
                return '门禁';
            } else if (type == 3) {
                return '停车场';
            } else if (type == 4 || type == 5) {
                return '安防报警-公区';
            } else if (type == 6) {
                return '火灾报警';
            }
        },
        // 刷新点位数据
        refreshPoint() {
            setTimeout(() => {
                getPointBySecId({
                    id: this.sectionId,
                    xqId: this.formSearch.xqId,
                    systemType: '',
                    devName: '',
                    state: 0
                }).then((res) => {
                    if (res.data.ok) {
                        this.pointList = res.data.data;
                    }
                });
            }, 100);
        },
        //获取设备品牌   根据设备系统
        // 获取设备映射表
        getDevMapping() {
            getDeviceMap(this.alarmFrom).then((res) => {
                if (res.data.ok && res.data.data.length) {
                    this.devList = res.data.data;
                    this.devList.map((item) => {
                        item.deviceName = item.devName;
                        item.deviceCode = item.id;
                    });
                } else {
                    this.devList = [];
                }
            });
        },
        // 获取停车场设备
        getParkingDev() {
            /* sectionTree */
            getCarDevs({
                size: 99999,
                current: 1,
                xqId: this.formSearch.xqId,
            }).then((res) => {
                this.devList = res.data.data.records;
                this.devList.map((item) => {
                    item.deviceName = item.parkName;
                    item.deviceCode = item.id;
                });
            });
        },
        //添加点位
        addPoint(dev) {
            dev.deviceSystem = this.drawerDevSys;
            dev.deviceType = this.drawerDevBrand.deviceType;
            dev.cameraCode = this.building;
            dev.bg = require('../../assets/images/bind_icon/online.svg');
            dev.x = 0;
            dev.y = 0;
            this.addDeviceBindList.push(dev);
            this.saveParams.list = this.addDeviceBindList;

            // 底图
            // let dom = document.querySelector('#cadImg');
            let dom = this.$refs.img;
            this.saveParams.list.map((item, index) => {
                if (!document.getElementById('myDom_' + index)) {
                    let aDom = document.createElement('span');
                    aDom.className = 'mark';
                    aDom.style.display = 'inline-block';
                    aDom.style.zIndex = '999';
                    aDom.style.width = 32 + 'px';
                    aDom.style.height = 32 + 'px';
                    aDom.style.cursor = 'move';
                    aDom.id = dev.id;
                    aDom.style.position = 'absolute';
                    aDom.style.left =
                        36 * index + +this.getNum(this.chaX) / this.zoom + 'px';
                    aDom.style.top = this.getNum(this.chaY) / this.zoom + 'px';
                    aDom.style.background = `url(${dev.bg}) no-repeat`;
                    aDom.style.backgroundSize = 'cover';
                    aDom.setAttribute('moveX', 0);
                    aDom.setAttribute('moveY', 0);
                    // aDom.setAttribute('zoom', this.zoom.toFixed(1));
                    if (this.chaX == 0 && this.chaY == 0) {
                        aDom.setAttribute('translateFlag', true);
                    } else {
                        aDom.setAttribute('chaX', this.chaX);
                        aDom.setAttribute('chaY', this.chaY);
                        aDom.setAttribute('translateFlag', false);
                    }
                    aDom.addEventListener('mousedown', this.move, true);
                    aDom.addEventListener(
                        'dblclick',
                        this.removeDom
                        // this.removeDom(aDom)
                    );
                    dom.appendChild(aDom);
                    aDom.id = 'myDom_' + index;
                    item.deviceCode = item.deviceCode || item.id;
                    item.id = 'myDom_' + index;
                }
            });
            this.closeDrawer();
            this.saveParams.tsf = {
                zoom: this.zoom,
                chaX: this.chaX,
                chaY: this.chaY,
            };
            this.$emit('getData', this.saveParams);
        },
        /* 底图上传成功执行 */
        handleSuccess(resp, file, fileList) {
            this.fileList = [];
            if (resp.ok) {
                // let obj = this.localVal; //点击的房间或区域对象
                if (!this.sectionId) {
                    this.$message.error('请选择区域后上传图片');
                    return;
                }

                uploadFloorImg({
                    xqId: this.formSearch.xqId,
                    baseMap: resp.data[0],
                    id: this.sectionId,
                    state: 0,
                    systemType: this.deviceSystem,
                    deviceType: this.deviceBrand,
                }).then((res) => {
                    if (res.data.ok) {
                        this.$message({
                            type: 'success',
                            message: "成功",
                        });
                        this.getCADImg({
                            xqId: this.formSearch.xqId,
                            state: 0,
                            id: this.sectionId,
                            systemType: this.deviceSystem,
                            deviceType: this.deviceBrand,
                        });
                    }
                });
            }
        },
        /* 判断是否超过文件数量 */
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeUpload() {
            if (!this.sectionId) {
                this.$message.warning('请先选择区域后上传');
            }
        },
        //关闭抽屉
        closeDrawer() {
            this.$emit('closeDrawer', false);
        },
        //删除点位
        removeDom(e) {
            this.$confirm('此操作将删除该点位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let id = e.target.id;
                    let index = -1;
                    e.target.parentNode.removeChild(e.target);
                    this.addDeviceBindList.forEach((item, ind) => {
                        if (item.id == id) {
                            index = ind;
                        }
                    });
                    this.addDeviceBindList.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        // 移动点位
        move(e) {
            e = e || event;
            let odiv = e.target;
            let ind = this.getDomIndex(odiv);
            if (ind <= -1) return;
            let mvDom = this.saveParams.list[ind];
            //算出鼠标相对元素的位置
            let domW = odiv.offsetWidth;
            let domH = odiv.offsetHeight;
            // if (odiv.parentNode.id != 'cadImg') return;
            let that = this;
            var oId = e.target.id;
            odiv.onmousedown = (e) => {
                e.preventDefault();
                //鼠标距离点位的距离
                let disX = e.clientX - odiv.offsetLeft * this.zoom;
                let disY = e.clientY - odiv.offsetTop * this.zoom;
                // let divW = odiv.parentNode.offsetWidth - domW;
                // let divH = odiv.parentNode.offsetHeight - domH;
                document.onmousemove = (e) => {
                    //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    e.preventDefault();
                    let left = (e.clientX - disX) / this.zoom;
                    let top = (e.clientY - disY) / this.zoom;
                    //限制拖动范围
                    // let left = e.clientX - disX < 0 ? 0 : e.clientX - disX;
                    // let top = e.clientY - disY < 0 ? 0 : e.clientY - disY;
                    // left = left > divW ? divW : left;

                    // left *= this.zoom;
                    // top *= this.zoom;

                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                    document.onmouseup = () => {
                        mvDom.x = left;
                        mvDom.y = top;
                        odiv.setAttribute('moveX', left);
                        odiv.setAttribute('moveY', top);

                        this.addDeviceBindList = this.addDeviceBindList.map(
                            (item) => {
                                if (item.id == oId) {
                                    item.x = left;
                                    item.y = top;
                                }
                                return item;
                            }
                        );

                        mvDom.deviceType = this.drawerDevSys;
                        that.saveParams.xqId = this.formSearch.xqId;
                        that.saveParams.sectionId = this.sectionId;
                        that.saveParams.cameraCode = this.building;
                        mvDom.cameraCode = this.building;
                        mvDom.deviceBrand = this.drawerDevBrand.deviceType;
                        // if (left == divW) {
                        //     odiv.remove();
                        // }
                        that.$emit('getData', that.saveParams);
                        document.onmousemove = null;
                        document.onmousedown = null;
                    };
                };
            };
            e.preventDefault();
            // e.stopImmediatePropagation();
            // e.stopPropagation();
        },
        getDomIndex(dom) {
            let arr = this.saveParams.list;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].id == dom.id) return i;
            }
            return -1;
        },
        rollImg() {
            // 防止整个页面滚动
            document
                .querySelector('#img')
                .addEventListener('wheel', function (e) {
                    e.preventDefault();
                });

            let zoom = event.wheelDelta;
            if (zoom > 1) {
                this.num += 0.1;
            } else {
                this.num -= 0.1;
            }
            if (this.num <= 0.3) this.num = 0.3;
            if (this.num >= 2) this.num = 2;
            /* 获取当前页面的缩放比
                若未设置zoom缩放比，则为默认100%，即1，原图大小
            */

            let img = document.getElementById('img');
            img.style.transform = 'scale(' + this.num + ')';
        },
        getSection(id) {
            sectionTree([id]).then((res) => {
                if (res.data.ok) {
                    this.sectionTree = res.data.data;
                }
            });
        },
        getCADImg(params, flag = true) {
            getFloorImg(params).then((res) => {
                if (res.data.ok) {
                    let data = res.data.data;
                    this.$nextTick(() => {
                        if (data) {
                            this.bindPoint.url = data.baseMap;
                            // this.$nextTick(() => {
                            let dom = document.querySelector('#cadImg img');
                            this.imgW = dom.offsetWidth;
                            this.imgH = dom.offsetHeight;
                            this.saveParams.imgW = this.imgW;
                            this.saveParams.imgH = this.imgH;
                            // });
                            this.saveParams.addDevFlag = true;
                            this.uploadFlag = false;
                            if (flag) {
                                this.getPointList();
                            }
                        } else {
                            this.saveParams.addDevFlag = false;
                            this.$set(this.bindPoint, 'url', '');
                            this.uploadFlag = true;
                            this.pointList = [];
                        }
                        this.$emit('getData', this.saveParams);
                        // this.$forceUpdate();
                    });
                }
            });
        },
        getPointListByParams(params) {
            getPointBySecId(params).then((res) => {
                if (res.data.ok) {
                    this.pointList = res.data.data.map((item) => {
                        item.systemTypeNum = this.getSystemType(
                            item.systemType
                        );
                        return item;
                    });
                }
            });
        },
        // 获取设备点位
        getPointList() {
            let params = {
                deviceType: this.drawerDevBrand.deviceType,
                systemType: this.getSystemName(this.drawerDevSys),
                xqId: this.formSearch.xqId,
                id: this.sectionId,
            };
            getPointBySecId(params).then((res) => {
                if (res.data.ok) {
                    this.pointList = res.data.data.map((item) => {
                        item.systemTypeNum = this.getSystemType(
                            item.systemType
                        );
                        return item;
                    });
                }
            });
            if (this.$route.path == '/iot_alarm') {
                getPointBySecId({
                    deviceType: '安防报警-室内',
                    systemType: '麦驰',
                    xqId: this.formSearch.xqId,
                    id: this.sectionId,
                }).then((res) => {
                    if (res.data.ok) {
                        let arr = res.data.data.map((item) => {
                            item.systemTypeNum = this.getSystemType(
                                item.systemType
                            );
                            return item;
                        });
                        this.pointList.concat(arr)
                    }
                });
            }
        },
        init() {
            xqSelectList({})
                .then((res) => {
                    if (res.data.ok) {
                        this.xqSelect = res.data.data;
                        let id = this.xqSelect[0].id;
                        this.formSearch.xqId = id;
                        return sectionTree([id]);
                    }
                })
                .then((res) => {
                    if (res.data.ok) {
                        this.sectionTree = res.data.data;
                        this.sectionId = this.sectionTree[0].id;
                        this.changeRadio(this.sectionTree[0]);
                        this.defaultCheck = [
                            this.sectionTree[0].children[0].id,
                        ];
                        this.defaultExpand = [this.sectionTree[0].id];
                        this.getCADImg({
                            xqId: this.formSearch.xqId,
                            state: 0,
                            id: this.sectionId,
                            systemType: this.deviceSystem,
                        });
                        this.$emit('getData', this.saveParams);
                    }
                });
        },
        /* 设备品牌列表 */
        getDevList() {
          const {deviceName, xqId} = this.formSearch;
          iotdevicepage({
            current: 1,
            size: 99999999,
            name: deviceName,
            productId: this.drawerDevBrand,
            sectionId: this.saveParams.sectionId,
            systemType: this.drawerDevSys,
            xqId: xqId,
          }).then(({data}) => {
            if (data.ok) {
              this.devList = data.data.records;
            }
          })
        }
    },
    mounted() {
        this.init();
        setTimeout(() => {
            this.$emit('getData', this.saveParams);
        }, 300);
        this.$set(this.saveParams, 'spaceType', this.viewType);
        // this.$emit('getData', this.saveParams);
    },
};
</script>

<style scoped lang='scss'>
.cadBind {
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    overflow: hidden;
    .condition {
        width: 200px;
        border-right: 1px solid #e1e1e1;
        box-shadow: 6px 0 20px #ededed;
        position: relative;
        overflow-x: hidden;
        background: #fff;
    }
    .condition::-webkit-scrollbar {
        display: none;
    }
    .btn {
        margin: 0 6px 10px;
    }
    .searchBox {
        color: #333;
        position: absolute;
        left: 200px;
        right: 0;
        height: 100%;
        border-left: 10px solid #eee;
        // background: skyblue;
        .operateBar {
            $operateH: 48px;
            height: $operateH;
            border-bottom: 4px solid #eee;
            display: flex;
            line-height: $operateH;
            background: #fff;
            & > div:nth-child(1) {
                flex: 4;
                text-indent: 0.3rem;
                .operateTop {
                    display: flex;
                    text-indent: 0;
                    .viewType {
                        text-align: center;
                        border: 1px solid var(--themeColor);
                        height: $operateH - 2;
                        cursor: pointer;
                        & > span {
                            height: $operateH - 2;
                            padding: 0 20px;
                            display: inline-block;
                        }
                    }
                    & /deep/ .el-breadcrumb {
                        height: $operateH;
                        line-height: $operateH;
                    }
                }
            }
            & > div:nth-child(2) {
                flex: 7;
            }
        }
        .commonTable {
            position: absolute;
            top: 60px;
            bottom: 0;
            left: 0;
            right: 0;
            overflow-y: scroll;
        }
        .commonTable::-webkit-scrollbar {
            width: 0;
        }
        .cadImg {
            background: #fff;
            position: absolute;
            top: 54px;
            // top: 48px;
            bottom: 0;
            width: 100%;
            overflow: hidden;
            // overflow-y: scroll;
            background-size: cover !important;
            z-index: 100;
            /* .mark {
                z-index:9999;
                display: inline-block;
                $mark: 32px;
                width: 32px;
                height: 32px;
                cursor: move;
                position: absolute;
                left: 0;
                top: 0;
            } */
            /* .mark {
                $mark: 24px;
                display: inline-block;
                width: $mark;
                height: $mark;
                border-radius: $mark;
                position: relative;
            }
            .mark:nth-child(n + 1) {
                background: #1f807f;
                left: 805px;
                top: 484px;
            }
            .mark:nth-child(n + 2) {
                background: red;
                left: 428px;
                top: 234px;
            }
            .mark:nth-child(n + 3) {
                background: gray;
                left: 166px;
                top: 276px;
            } */
        }
        .noImg {
            height: 100%;
            position: relative;
            text-align: center;
            z-index: 998;
            & > div {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.dev {
    /* 无法选中字体 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    display: inline-block;
    margin: 20px 0;
    & > span {
        cursor: pointer;
        display: inline-block;
        $door: 36px;
        width: $door;
        height: $door;
        // border-radius: 50%;
    }
    .doorMagnetic {
        background: url('../../assets/images/bind_icon/door_close_on.svg') no-repeat;
    }
    .camera {
        /* background: url('../../assets/images/bind_icon/camera1.svg') no-repeat; */
        background: url('../../assets/images/bind_icon/online.svg') no-repeat;
    }
    .alarm {
        background: url('../../assets/images/bind_icon/alarm1.svg') no-repeat;
    }
    .parking {
        background: url('../../assets/images/bind_icon/parking1.svg') no-repeat;
    }
}
.drawer {
    .deviceList {
        position: absolute;
        top: 210px;
        bottom: 10px;
        overflow-y: scroll;
        width: 100%;
        .dev {
            width: 30%;
        }
    }
}

.marginLeft10 {
    margin-left: 10px;
    width: none !important;
}
.marginLeft10 + .el-input {
    width: none !important;
}
.cadBind > div {
    display: inline-block;
    height: 100%;
}
.form_demo {
    padding: 0 10px;
}
</style>
